<template>
  <div>
		<Header :title="workshop.title"/>
		<PatchBox :list="topList"/>
		<div class="content">
			<aside class="aside-box aside-left">
				<Moudle title="生产成本分析">
					<div class="relative">
						<AsideBG title="今日"/>
						<Echarts :options="echarts[2]"/>
					</div>
					<div class="relative">
						<AsideBG title="近一周"/>
						<Echarts class="h15" type="bar" :options="echarts[3]"/>
					</div>
				</Moudle>
				<Moudle title="成品率">
					<div class="relative">
						<AsideBG title="今日"/>
						<Echarts :options="yieId"/>
					</div>
					<div class="relative">
						<AsideBG title="近一周"/>
						<Echarts class="h12" type="line" :options="echarts[1]"/>
					</div>
				</Moudle>
				<Moudle title="各车间机组数量">
					<div class="fz2" v-for="item in workshop.products" :key="item.id">
						<router-link :to="{name: 'Product', params:{productId: item.id}}">
							{{item.title}}
						</router-link>
						<span>: {{item.jizuNum}}</span>
					</div>
				</Moudle>
			</aside>
			<div class="center-box">
				<MySwiper class="map-box" :list="swiperList"/>
				<Moudle title="计划完成情况">
					<div class="relative ib w2">
						<AsideBG title="今日"/>
						<Echarts :options="echarts[4]"/>
					</div>
					<div class="relative ib w8">
						<AsideBG title="近一周" :right="true"/>
						<Echarts class="h15" type="bar" :options="echarts[5]"/>
					</div>
				</Moudle>
			</div>
			<aside class="aside-box aside-right">
				<Moudle title="每周产能">
					<Echarts class="h15" type="line" :options="weekNums"/>
				</Moudle>
				<Moudle title="每月产能">
					<Echarts class="h15" type="line" :options="echarts2[0]"/>
				</Moudle>
				<Moudle title="累计产能">
					<Echarts :options="echarts2[1]"/>
				</Moudle>
			</aside>
		</div>
  </div>
</template>

<script>
import {dataMaper} from '../mock/data/maper.js'
import {mapState} from 'vuex'
export default {
  name: 'Workshop',
	data(){
		return{
			productId: 1,
			swiperList: [
				require('../assets/images/banner/1.png'),
				require('../assets/images/banner/2.png'),
				require('../assets/images/banner/3.png')
			],
			echarts: [],
			echarts2: [],
			yieId: {},
			weekNums: {},
			topList: []
		}
	},
	computed:{
		...mapState(['workshops', 'products']),
		weekDays(){
			return this.$store.getters.weekDays;
		},
		workshopId(){
			return this.$route.params.workshopId;
		},
		workshop(){
			if(!this.workshops.length) return {};
			return this.workshops.find((v) => v.id == this.workshopId);
		}
	},
	watch:{
		// 根据工厂信息的刷新，设置顶部数据，设置图表数据
		workshop(val){
			this.getTopData();
			this.initEcharts();
			this.$nextTick(() => {
				this.setEcharts(val);
			})
		},
		products(val){
			// 有bug，无法先初始化再设置值，初始化的数据会失效，只能一起使用
			this.setEcharts2(val);
		}
	},
	methods:{
		getTopData(){
			let arr = [],
					keys = ['productSum', 'jizuNum', 'jdlNum', 'totalNum', 'monthNum', 'todayNum'];
			keys.forEach((key) => {
				let {title, unit, type} = dataMaper[key];
				arr.push({title, value: this.workshop[key] || 0 + unit, type});
			})
			this.topList = arr;
		},
		initEcharts(){
			let xAxis = {data: this.weekDays},
					type = 'bar',
					smooth = true,
					series = [{
						areaStyle: {
							color: {
								type: 'linear',
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0, color: '#2dffff'
								}, {
									offset: 1, color: '#2d9fff'
								}]
							}
						}
					}];
					
			this.yieId = {}
			this.echarts[1] = {
				xAxis,
				yAxis:{max: 100},
				series,
				tooltip: {
					formatter: '{c}%'
				},
				grid:{
					left: '5%'
				}
			}
			this.echarts[2] = {
				formatter: '{c}吨'
			}
			this.echarts[3] = {
				xAxis,
				yAxis: {
					axisLabel: {
						formatter:'{value} 吨'
					}
				},
				series: [{name: '原材料', type, smooth}, {name: '电能耗', type, smooth}, {name: '水能耗', type, smooth}],
				tooltip: {
					trigger: 'axis',
					formatter: ''
				},
				legend: {
					left: 'left',
					top: -5,
					textStyle:{
						color: '#fff'
					}
				},
				grid:{
					top: '20%',
					left: '8%'
				}
			}
			this.echarts[4] = {
				series: [{
					radius: '100%'
				}]
			}
			this.echarts[5] = {
				xAxis,
				yAxis:{max: 100}
			}
		},
		setEcharts(val){
			this.yieId = {
				series:[{
					data: val.yieId
				}]
			}
			this.echarts[1] = {
				series:[{
					data: val.yieIdWeek
				}]
			}
			this.echarts[2] = {
				series:[{
					data: [
						{name: "原材料", value: val.cost.material},
						{name: "电能耗", value: val.cost.electric},
						{name: "水能耗", value: val.cost.water}
					]
				}]
			}
			this.echarts[3] = {
				series:[{
					data: val.costWeek.material
				},{
					data: val.costWeek.electric
				},{
					data: val.costWeek.water
				}]
			}
			this.echarts[4] = {
				series:[{
					data: [
						{name: "完成率", value: val.complete[0]},
						{name: "未完成", value: val.complete[1]}
					]
				}]
			}
			this.echarts[5] = {
				series:[{
					data: val.completeWeek
				}]
			}
		},
		setEcharts2(val){
			let weekNums = [],
					monthNums = [],
					totalNums = [],
					names = [];
			val.forEach((v) => {
				let name = v.name;
				weekNums.push({data: v.weekNums, name, smooth: true, type: 'line'});
				monthNums.push({data: v.monthNums, name, smooth: true, type: 'line'});
				totalNums.push({name, value: v.totalNum});
				names.push(name)
			})
			
			let legend = {
				left: 'left',
				textStyle:{
					color: '#fff'
				}
			},
			tooltip = {
				trigger: 'axis',
				formatter: ''
			},
			yAxis = {
				axisLabel: {
					formatter:'{value} 吨'
				}
			},
			grid = {
				top: '22%'
			};
			this.weekNums = {
				xAxis:{data: this.weekDays},
				yAxis,
				series: weekNums,
				legend,
				tooltip,
				grid
			}
			this.echarts2[0] = {
				xAxis: {data: [1,2,3,4,5,6]},
				yAxis,
				series: monthNums,
				legend,
				tooltip,
				grid
			}
			this.echarts2[1] = {
				series: {data: totalNums},
				tooltip:{
					formatter: '{c}吨'
				}
			}
		}
	},
	components: {
		PatchBox: () => import('@/components/global/PatchBox')
	},
	created() {
		this.$store.dispatch('request', {url: '/mock/workshops', name: 'workshops'});
		this.$store.dispatch('request', {url: '/mock/products', name: 'products'});
	}
}
</script>

<style scoped lang="less">
</style>